<script setup lang="ts">
import { defineProps, onBeforeMount, reactive, ref } from 'vue'
import { useRouterPush } from '@/composables';

const { toAddrList, toGuardianList } = useRouterPush()

const props = defineProps({
  formData: {
    type: Object,
    required: true
  },
  isOrder: {
    type: Boolean,
    default: false
  },
  nurseUser: {
    type: Object,
    required: true
  }
})
const familyModule: any = reactive({
  show: false,
  list: [],
  selectAddr: (prevExistAdd?: any, nowExistAdd?: any, arr?: any) => {
    props.formData.familyId = nowExistAdd.id
    props.formData.name = `${nowExistAdd.name}${nowExistAdd.phone}`
  },
  setList: () => {
    const familylist = (props.nurseUser.nurseUserFamilyList || []).map((item: { relationName: any; age: any; ageUnit: any; }) => {
      return {
        ...item,
        selectedAddress: (props.nurseUser.nurseUserFamilyList || []).length == 1 ? true : false,
        addressDetail: `${item.relationName} ${item.age}${item.age ? item.ageUnit : ''}`,
        cityName: '',
        countyName: '',
        provinceName: '',
        townName: '',
      }
    })
    familyModule.list = familylist
  }
})

const addrModule: any = reactive({
  show: false,
  list: [],
  selectAddr: (prevExistAdd: any, nowExistAdd: { id: string; areaName: any; address: any; hospitalName: any; deptName: any; bedName: any; }, arr: any) => {
    props.formData.addrId = nowExistAdd.id
    props.formData.address = `${nowExistAdd.areaName}${nowExistAdd.address}`
    props.formData.hospital = `${nowExistAdd.hospitalName}${nowExistAdd.deptName}${nowExistAdd.bedName}`
  },
  setList: () => {
    const addrlist = (props.nurseUser.nurseUserAddrList || []).map((item: { isDefault: any; areaName: any; address: any; }) => {
      return {
        ...item,
        selectedAddress: item.isDefault ? true : false,
        addressDetail: `${item.areaName}${item.address}`,
        cityName: '',
        countyName: '',
        provinceName: '',
        townName: '',
      }
    })
    addrModule.list = addrlist
  }
})

onBeforeMount(() => {
  familyModule.setList()
  if ((props.nurseUser.nurseUserFamilyList || []).length == 1) {
    const family = (props.nurseUser.nurseUserFamilyList || [])[0]
    familyModule.selectAddr(null, family, null)
  }
  addrModule.setList()
  const addr = (props.nurseUser.nurseUserAddrList || []).find((item: { isDefault: boolean; }) => item.isDefault == true)
  if (addr) addrModule.selectAddr(null, addr, null)
})
const formRef = ref()

// 暴露验证方法给父组件
defineExpose({
  validate: () => formRef.value?.validate()
})
</script>

<template>
  <nut-form class="flex-col-center" :model-value="formData" ref="formRef">
    <view class="w-360px flex-col-center">
      <!-- 监护人选择 -->
      <view class="w-full flex-center justify-between">
        <nut-form-item prop="name" required :rules="[{ required: true, message: '请选择被监护人' }]">
          <nut-input @click="() => {
            if (isOrder) return
            familyModule.show = true
          }" v-model="formData.name" readonly placeholder="请选择被监护人" type="text" />
        </nut-form-item>
        <view class="w-1/5 flex-col-center" @click="() => {
          if (isOrder) return
          toGuardianList()
        }">
          <view :class="[isOrder ? 'text-gray-100' : '', 'i-local-right-bold w-24px h-24px']" />
        </view>
      </view>

      <!-- 地址选择 -->
      <view class="w-full flex-center justify-between items-center">
        <nut-form-item prop="address" required :rules="[{ required: true, message: '请选择地址' }]">
          <nut-textarea @click="() => {
            if (isOrder) return
            addrModule.show = true
          }" class="h-40px" v-model="formData.address" readonly placeholder="请选择地址" type="text" />
        </nut-form-item>
        <view class="w-1/5 flex-col-center" @click="() => {
          if (isOrder) return
          toAddrList()
        }">
          <view :class="[isOrder ? 'text-gray-100' : '', 'i-local-right-bold w-24px h-24px']" />
        </view>
      </view>

      <!-- 医院信息 -->
      <view class="w-full flex-center justify-between">
        <nut-form-item prop="hospital" :rules="[{ required: false, message: '' }]">
          <nut-input readonly v-model="formData.defaultHospitalName" :placeholder="nurseUser.defaultHospitalName"
            type="text" />
        </nut-form-item>
      </view>
    </view>
  </nut-form>
  <nut-address exist-address-title="选择监护人" @selected="familyModule.selectAddr" v-model:visible="familyModule.show"
    type="exist" :exist-address="familyModule.list" @close="familyModule.show = false" :is-show-custom-address="false">
    <template #unselected-icon>
      <view class="i-local-people-fill w-16px h-16px text-primary mr-4" />
    </template>
  </nut-address>
  <nut-address exist-address-title="选择地址" @selected="addrModule.selectAddr" v-model:visible="addrModule.show"
    type="exist" :exist-address="addrModule.list" @close="addrModule.show = false" :is-show-custom-address="false">
  </nut-address>
</template>